// 导入全局样式变量和混合器
@import '@styles/variables.scss';
@import '@styles/mixins.scss';

// 聊天区域容器
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: $background-primary;
    position: relative;
    overflow: hidden;
    min-width: 375px;

    // 错误提示样式
    &__error-toast {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 1000;

        i {
            color: #ef4444;
            font-size: 20px;
        }

        span {
            color: #374151;
            font-size: 14px;
        }
    }

    // 内容包装器
    &__content {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 120px 24px;
        gap: 24px;
        position: relative;

        @include responsive('xl') {
            padding: 0 60px 24px;
        }

        @include responsive('md') {
            padding: 0 16px 24px;
        }
    }

    // 头部样式
    &__header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid $border-color;
        background: $background-primary;
        z-index: 10;

        &-wrapper {
            width: 100%;
            max-width: 1440px;
            padding: 0 120px;
            display: flex;
            justify-content: center;

            @include responsive('xl') {
                padding: 0 60px;
            }

            @include responsive('md') {
                padding: 0 16px;
            }
        }

        &-title {
            padding: 4px 8px;
            font-size: $font-size-md;
            font-weight: $font-weight-medium;
            color: $text-primary;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: fit-content;
            text-align: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            border-radius: $border-radius-md;
            transition: background-color $transition-fast $easing-ease;
            margin: 0 auto;

            &:hover {
                background-color: $background-secondary;
            }

            .edit-icon {
                opacity: 0;
                transition: opacity $transition-fast $easing-ease;
            }

            &:hover .edit-icon {
                opacity: 1;
            }
        }
    }

    // 消息列表
    &__messages {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding-top: 96px;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        height: calc(100vh - 200px);
        @include scrollbar;

        /* 自定义滚动条样式 */
        &::-webkit-scrollbar {
            width: 8px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background: #e5e6e8;
            border-radius: 4px;
        }

        &::-webkit-scrollbar-thumb:hover {
            background: #c9cdd4;
        }
    }

    // 输入区域
    &__input-area {
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
        margin-top: auto;
        flex-shrink: 0;

        &-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px;
            border: 1px solid #F2F3F5;
            border-radius: $border-radius-md;
            background: $background-primary;
            transition: all $transition-normal $easing-ease;

            &:hover {
                border-color: $primary-color;
            }

            &--focused {
                border-color: $primary-color;
            }
        }

        &-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: $font-size-sm;
            color: $text-primary;
            background: transparent;
            resize: none;
            height: 40px;
            min-height: 40px;
            max-height: 40px;
            line-height: 20px;
            padding: 0;
            overflow-y: auto;
            @include scrollbar;

            &::placeholder {
                color: $text-tertiary;
            }

            /* 自定义滚动条样式 */
            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background: #e5e6e8;
                border-radius: 2px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background: #c9cdd4;
            }
        }

        &-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 32px;
        }

        &-buttons {
            display: flex;
            align-items: center;
            gap: 4px;
            height: 100%;

            .chat-area__action-button {
                width: 24px;
                height: 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
                background: transparent;
                border-radius: 4px;
                color: #86909c;
                cursor: pointer;
                flex-shrink: 0;

                &:hover {
                    background: rgba(0, 0, 0, 0.04);
                    color: #1d2129;
                }

                i {
                    font-size: 16px;
                    line-height: 1;
                }
            }
        }
    }

    &__quick-actions {
        display: flex;
        gap: 8px;
        padding: 0 12px;
        margin-bottom: 8px;
    }

    // 快捷操作按钮
    &__quick-action {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 5px 8px;
        border: 1px solid $border-color;
        border-radius: $border-radius-md;
        background: transparent;
        color: $text-secondary;
        cursor: pointer;
        font-size: $font-size-sm;
        transition: all $transition-fast $easing-ease;

        &:hover {
            background: $background-secondary;
        }

        &--active {
            background: $background-secondary;
        }
    }

    // 发送按钮
    &__send-button {
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: $primary-color;
        border: 1px solid $primary-color;
        border-radius: $border-radius-sm;
        color: white;
        cursor: pointer;
        transition: all $transition-fast $easing-ease;

        &:hover {
            background: $primary-hover;
            border-color: $primary-hover;

            &.opacity-50 {
                background: #94BFFF;
                border-color: #6AA1FF;
            }

            &.opacity-100 {
                background: #0E42D2;
                border-color: #0E42D2;
            }
        }

        &:active {
            background: $primary-active;
            border-color: $primary-active;

            &.opacity-50 {
                background: #94BFFF;
                border-color: #6AA1FF;
            }

            &.opacity-100 {
                background: #0E42D2;
                border-color: #0E42D2;
            }
        }

        &--disabled {
            background: lighten($primary-color, 20%);
            border-color: lighten($primary-color, 20%);
            cursor: not-allowed;
        }

        i {
            font-size: 16px;
            line-height: 1;
        }

        &.opacity-50 {
            background: #94BFFF;
            border: 1px solid #6AA1FF;
        }

        &.opacity-100 {
            background: $primary-color;
            border: 1px solid $primary-color;
        }

    }

    // 滚动到底部按钮
    &__scroll-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 180px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: $background-primary;
        border: 1px solid $border-color;
        box-shadow: $shadow-chat-area;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all $transition-normal $easing-ease;
        z-index: 1000;

        &:hover {
            background: $background-secondary;
            border-color: $primary-color;
            color: $primary-color;
        }

        &--visible {
            opacity: 1;
            visibility: visible;
        }

        @include responsive('md') {
            bottom: 160px;
        }

        i {
            font-size: 16px;
            line-height: 1;
        }
    }

}